<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>终端初始化</title>
    <script src="js\Jquery3.1.1.js"></script>
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="layui/lay/modules/layer.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <style>
        hr {
            display: none;
        }

        #timeLine > li {
            font-size: 15px;
            font-weight: bold;
            margin: 0 10px;
        }

        #timeContent > div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        #timeContent > div > form {
        }
    </style>
</head>
<body style="background-color: #2C3E50">
<div style="position: absolute;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center">
    <div style="border: solid darkgrey 1px;width: 80%;height: 80%;background-color: #FCFCFC;border-radius: 20px;padding: 10px;box-shadow: 0px 0px 10px black">
        <div style="height: 7%">
            <span style="color: #3E5275;font-size: 25px;font-weight: bold">图书馆管理系统——</span><span
                style="color: #FFAB5B;font-size: 25px;font-weight: bold">终端系统</span>
        </div>
        <div style="width: 100%;text-align: center;height: 7%">
            <span style="color: #828282;font-size: 25px;font-weight: bold;margin-top: 10px;">系统初始化</span>
        </div>
        <div>
            <ul id="timeLine" style="display: flex;justify-content: center">

            </ul>
        </div>
        <div id="timeContent"
             style="width: 85%;text-align: center;border: solid darkgrey 1px;height: 70%;margin:  0 auto">
            <div>
                <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">管理员帐号</label>
                        <div class="layui-input-block">
                            <input type="text" name="adminName" lay-verify="adminName" placeholder="请输入管理帐号"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">管理员密码</label>
                        <div class="layui-input-block">
                            <input type="text" name="adminPassword" lay-verify="adminPassword" placeholder="请输入密码"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">管理密码</label>
                        <div class="layui-input-block">
                            <input type="text" name="adminPassword1" lay-verify="adminPassword1" placeholder="请输入密码"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <button class="layui-btn" lay-submit lay-filter="form1">立即提交</button>
                </form>
            </div>
            <div>
                <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 120px">终端端口号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="terminalPort" lay-verify="required" placeholder="请输入终端端口号"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 120px;">终端类型</label>
                        <div class="layui-input-inline">
                            <select name="terminalSymbol" lay-verify="required">
                                <option value="J">自助借还书机</option>
                                <option value="G">馆员工作站</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 120px">终端号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="terminalNumber" lay-verify="required" placeholder="请输入终端号"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <button class="layui-btn" lay-submit lay-filter="form2">立即提交</button>
                </form>
            </div>
            <div>
                <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 120px">服务器端口号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="serverPort" lay-verify="required" placeholder="请输入服务器的端口号"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 120px;">服务器IP地址</label>
                        <div class="layui-input-inline">
                            <input type="text" name="serverIP" lay-verify="serverIP" placeholder="请输入服务器的IP地址"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <span id="FindServer" class="layui-btn">自动查找</span>
                        <span id="chekIP"></span>
                    </div>
                    <button class="layui-btn" lay-submit lay-filter="form3">立即提交</button>
                </form>
            </div>
            <div>
                <i class="layui-icon" style="font-size: 60px; color: #26A65B;font-weight: bold">&#xe605;</i><span
                    style="font-size: 25px">设置完毕！</span>
                <button id="restart" class="layui-btn layui-btn-danger">初始化完毕并重启系统</button>
            </div>
        </div>
        <div id="jindutiao" class="layui-progress layui-progress-big" lay-filter="restart" lay-showPercent="yes">
            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $.ajax({
            url: 'getConfigAllParam',
            async: false,
            success: function (res) {
                if (res.paramList.inited == 1) {
                    location.href = "manager";
                }
                $("#timeContent>div").hide();
                $("#timeContent>div:nth-child(" + res.paramList.initStep + ")").show();
                var stepName = ["设置管理帐号", "设置终端", "设置服务器", "设置完毕！"]
                for (var i = 0; i < 4; i++) {
                    if (i < res.paramList.initStep) {
                        $("#timeLine").append('<li style="color: #EB7347"><i class="layui-icon ">&#xe643;</i><span class="layui-timeline-title">' + stepName[i] + '</span></li>')
                    } else {
                        $("#timeLine").append('<li style="color: darkgrey;"><i class="layui-icon ">&#xe643;</i><span class="layui-timeline-title">' + stepName[i] + '</span></li>')
                    }
                }
            }
        });
    })
</script>
<script>
    layui.use('form', function () {
        var form = layui.form;
        form.on('submit(form1)', function (data) {
            console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
            //管理员帐号
            $.ajax({
                type: 'POST',
                url: 'updateConfigParam',
                data: {paramKey: 'adminName', paramValue: data.field.adminName},
                async: false,
                success: function () {

                },
            });
            //管理员密码
            $.ajax({
                type: 'POST',
                url: 'updateConfigParam',
                data: {paramKey: 'adminPassword', paramValue: data.field.adminPassword},
                async: false,
                success: function () {

                }
            });
            $.ajax({
                type: 'POST',
                url: 'updateConfigParam',
                data: {paramKey: 'initStep', paramValue: 2},
                async: false,
                success: function () {
                    location.reload();
                }
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        form.on('submit(form3)', function (data) {
            console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
            //管理员帐号
            $.ajax({
                type: 'POST',
                url: 'updateConfigParam',
                data: {paramKey: 'serverIP', paramValue: data.field.serverIP},
                async: false,
                success: function () {

                },
            });
            //管理员密码
            $.ajax({
                type: 'POST',
                url: 'updateConfigParam',
                data: {paramKey: 'serverPort', paramValue: data.field.serverPort},
                async: false,
                success: function () {

                }
            });
            $.ajax({
                type: 'POST',
                url: 'updateConfigParam',
                data: {paramKey: 'initStep', paramValue: 4},
                async: false,
                success: function () {
                    location.reload();
                }
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        form.on('submit(form2)', function (data) {
            console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
            //管理员帐号
            $.ajax({
                type: 'POST',
                url: 'updateConfigParam',
                data: {paramKey: 'terminalNumber', paramValue: data.field.terminalNumber},
                async: false,
                success: function () {

                },
            });
            //管理员密码
            $.ajax({
                type: 'POST',
                url: 'updateConfigParam',
                data: {paramKey: 'terminalSymbol', paramValue: data.field.terminalSymbol},
                async: false,
                success: function () {

                }
            });
            //终端端口号
            $.ajax({
                type: 'POST',
                url: 'updateTerminalPort',
                data: {port: data.field.terminalPort},
                async: false,
                success: function () {

                }
            });
            $.ajax({
                type: 'POST',
                url: 'updateConfigParam',
                data: {paramKey: 'initStep', paramValue: 3},
                async: false,
                success: function () {


                    location.reload();
                }
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        form.verify({
            adminName: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '请填写完整的管理帐号';
                }
            }
            , adminPassword: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^(\\w){6,20}$").test(value)) {
                    return '管理密码6-20位';
                }
            }
            , adminPassword1: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^(\\w){6,20}$").test(value)) {
                    return '管理密码6-20位';
                }
                if ($("input[name='adminPassword']").val() !== $("input[name='adminPassword1']").val()) {
                    return '密码不一致';
                }
            }, serverIP: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^((25[0-5]|2[0-4]\\d|((1\\d{2})|([1-9]?\\d)))\\.){3}(25[0-5]|2[0-4]\\d|((1\\d{2})|([1-9]?\\d)))$").test(value)) {
                    return '请输入正确的ip地址';
                }

            }
        });
    });
</script>
<script>
    $("#FindServer").click(function () {
        if ($("input[name='serverPort']").val() == null || $("input[name='serverPort']").val() == "") {
            $("#serverPort").addClass("layui-form-danger");
            layer.msg('请输入端口号', {icon: 5});
            return;
        }
        $.ajax({
            url: 'FindServiceIpAddres'
            , data: {port: $("input[name='serverPort']").val()}
        });
        // socket();
        $("#FindServer").html("正在查找...");
    });
</script>
<script>
    var ip = "";
    var port = "";
    $.ajax({
        url: 'getOldPort',
        async: false,
        success: function (res) {
            port = res.port;
            ip = res.ip;
        }
    });
    var ws = new WebSocket("ws://localhost:" + window.location.port + "/sokect");
    ws.onmessage = function (evt) {
        var msg = JSON.parse(evt.data);
        if (msg.statusCode == "0") {
            layer.msg('已找到服务器', {icon: 1});
            $("input[name='serverIP']").val(msg.ip);
            $("input[name='serverPort']").val(msg.port);
            $("#FindServer").html("自动查找");
        }
        if (msg.statusCode == "-1") {
            layer.msg('找不到服务器，请联系管理员', {icon: 5});
            $("#FindServer").html("自动查找");
        }
        if (msg.from == "FindServer") {
            $("#chekIP").html(msg.checkIP);
        }
    }
</script>
<script>
    $("#restart").click(function () {
        $.ajax({
            url: 'finishInit',
            async: false,
            success: function (res) {
                console.log(res);
                if (res.statusCode == 0) {
                    $("#restart").hide();
                    $("#jindutiao").show();
                    // location.href="http://localhost:8889/manager";
                    layui.use('element', function () {
                        var element = layui.element;
                        var p = 0;
                        var inter = setInterval(function () {
                            p++;
                            element.progress('restart', p + "%");
                            if (p == 100) {
                                clearInterval(inter);
                                location.href = "http://localhost:" + res.newPort + "/manager";
                            }
                        }, 100);
                    });
                }
            }
        });
    });
</script>
</body>
</html>